import React, { useEffect, useState } from 'react'
import { Search, Toast, Empty, DropdownMenu   } from 'react-vant';
import { Delete } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { SEARCH, SEARCHLIST,CLEAR } from '../../axios'
import './search.css'
export default function Search1() {
    const [ value, setValue] = useState('');
    const [ place,setPlace ] = useState('')
    const [ hotList,setHotList ] = useState([])
    const [ keyword,setKeyword ] = useState([])
    const [ searchList,setSearchList ] = useState([])
    const [ opt,setOpt ] = useState('')
    const [ flag,setFlag ] = useState(true)
    const [ vis,setVis ] = useState(true)
    const navigate = useNavigate()
    const option1 = [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' },
      ]
    useEffect(() => {
        getSearchList()
    },[])
    const getSearchList = () => {
        SEARCH().then(res => {
            // console.log(res);
            setHotList(res.data.data.hotKeywordList)
            setKeyword(res.data.data.historyKeywordList)
            setPlace(res.data.data.defaultKeyword.keyword)
        })
    }
    const go = (values) => {
        setValue(values)
        GetSearch(values)
    }
    const GetSearch = (keyword,order='desc') => {
        SEARCHLIST({keyword,page:1,order}).then(res => {
            setSearchList(res.data.data.goodsList)
            setFlag(false)
        })
    }   
    const change = (order) => {
        console.log(order);
        setOpt(order)
        GetSearch(value,order.价格)
    }
    const del = () => {
        CLEAR().then(res => {
            getSearchList()
            setVis(false)
        })
    }
    console.log(searchList);
  return (
    <div className='search-box'>
        <Search
        value={value}
        onChange={setValue}
        clearable={true}
        // clearTrigger='focus'
        placeholder={place}
        showAction
        onSearch={(val) => {
            // Toast(val);
            setValue(val);
            GetSearch(val)
        }}
        onCancel={() => {
            setValue('');
            navigate(-1)
        }}
        onClear={() => {
            Toast('清除');
            setValue('');
        }}
        onClickInput={() => {
            
        }}
        />

        {flag && <div>
            {vis&&<div className='search-top'>
            <div className='search-top-del'>
                <span>历史记录</span>
                <Delete onClick={del} />
            </div>
            {keyword.length > 0 && <ul className='search-ul'>
                
                {
                    keyword.map((item,index) => {
                        return <li key={index} onClick={() => go(item)}>
                           <span>{item}</span> 
                        </li>
                    })
                }
            </ul>}
            </div>}

            <div className='search-top'>
            <div>热门搜索</div>
            {hotList.length > 0 && <ul className='search-ul'>
                
                {
                    hotList.map((item,index) => {
                        return <li key={index} className={index == 0 ? 'active' : ''} onClick={() => go(item.keyword)}>
                           <span>{item.keyword}</span> 
                        </li>
                    })
                }
            </ul>}
            </div>
        </div>}

        {!flag && searchList.length > 0 && <div className='searchlist-box'>
            <DropdownMenu value={opt} onChange={v => change(v)}>
            <DropdownMenu.Item disabled  name='全部' options={option1} />
            <DropdownMenu.Item name='价格' options={option1} />
            <DropdownMenu.Item disabled  name='分类' options={option1} />
            </DropdownMenu>
        <ul className='search-list'>
            {
               searchList.map(item => {
                return <li key={item.id} onClick={() => navigate('/detail/'+item.id)}>
                    <img src={item.list_pic_url} alt="" />
                    <p className='search-list-name'>{item.name}</p>
                    <p className='search-list-price'>￥{item.retail_price}.00元</p>
                </li>
               })
            }
        </ul></div>}
        {!flag && searchList.length == 0 && <div className='kong'>
            <img src="https://img01.yzcdn.cn/vant/empty-image-search.png" alt="" />    
            <p>抱歉,没有搜索到商品</p>
        </div>}

    </div>
  )
}
